<template>
	<view class="order">
		<u-subsection :list="list" :current="current" mode="subsection" @change="sectionChange"></u-subsection>
		<view class="content">
			<view v-for="(item,index) in orderList" :key="index" class="orderItems" @click="orderDetail(item)">
				<view class="info">
					<view class="left">
						<view class="city-train_number">
							<text>{{item.from_city}}</text> - <text>{{item.to_city}}</text>&emsp;
							<text>{{item.Train_number}}</text>
						</view>

						<view class="seat-rider">
							<text>{{item.seat}}</text>&emsp;<text>{{item.rider}}</text>
						</view>

						<view class="timer">
							2022-06-15 &emsp; {{item.start_time}} &nbsp; 至 &nbsp; {{item.end_time}}
						</view>
					</view>

					<view class="right">
						<view class="price">
							￥{{item.price}}
						</view>

						<view class="types" :style="{color: renderType(item.type).color}">
							{{renderType(item.type).value}}
						</view>
					</view>
				</view>

				<view class="action">
					<u-button shape="circle">删除订单</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const list = reactive([{
		name: '全部',
	}, {
		name: '待出行',
	}, {
		name: '待支付'
	}, {
		name: '已取消'
	}])
	let orderList = reactive([])
	const orderSelect = reactive([])

	onLoad(() => {
		uni.request({
			url: 'http://127.0.0.1:9000/api/get_order',
			method: 'GET',
			success(res) {
				console.log(res.data.res)
				orderList.push(...res.data.res)
				orderSelect.push(...res.data.res)
			}
		})
	})

	const current = ref(0)

	function sectionChange(index) {
		current.value = index;
		if (index == 0) {
			orderList = orderSelect
		} else {
			orderList = orderSelect.filter(item => item.type === index)
		}
	}

	function renderType(type) {
		switch (type) {
			case 1:
				return {
					color: 'green',
						value: '出票成功'
				}
				break

			case 2:
				return {
					color: 'red',
						value: '待支付'
				}

			case 3:
				return {
					color: 'black',
						value: '退款成功'
				}
		}
	}

	const orderDetail = (item) => {
		let code = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: '/pages/orderDetail/orderDetail?code=' + code
		})
	}
</script>

<style lang="scss">
	page,
	.order {
		width: 100%;
		height: 100%;

		.content {
			width: 95%;
			margin: 0 auto;

			.orderItems {
				width: 95%;
				height: 120px;
				padding: 20rpx;
				background-color: #ffffff;
				box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
				border-radius: 5px;
				margin-top: 10px;
				position: relative;

				.info {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.left {
						height: 100px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.city-train_number {
							font-weight: 700;
						}
					}

					.right {
						height: 66px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.price {
							color: darkorange;
							font-weight: 700;
							font-size: 20px;
						}
					}
				}

				.action {
					width: 30%;
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;

					button {
						width: 100%;
					}
				}
			}
		}
	}
</style>